<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="我的业绩"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="选择日期区间" :value="date" @click="show = true" is-link/>
    <van-calendar
v-model="show"
type="range"
@confirm="onConfirm"
:min-date="minDate"
                  :max-date="maxDate" />

    <van-field
      v-model="shname"
      label="商户名称:"
      placeholder="请输入商户名称"
      @input="handleInputShname"
    />

    <div v-for="item in achList " :key="item.achid">

      <van-swipe-cell right-width="65">
        <div>
          <div class="rownr" @click="doModify(item)">
            <div class="columnr">
              <div style="font-size: 16px;padding-left: 30px;padding-top: 5px;">
                {{item.index + '.' +  item.shname}}
              </div>
              <div style="padding-left: 30px;padding-top: 5px;color: #B2B2B2">
                <van-tag type="primary" size="small">{{item.ywlxname}}</van-tag>  {{item.ywlx == '1' ? item.ktlxname:'' }} {{item.dknum? item.dknum + '个':''}} {{item.dklxname ? item.dklxname : ''}} {{item.ywlx == '5' ? item.dyjlxname:''}}
              </div>
              <div style="font-size: 12px;padding-left: 30px;padding-top: 5px;color: #B2B2B2">
                开通时间：{{item.ktdate}}
              </div>
              <div style="font-size: 12px;padding-left: 30px;padding-top: 5px;padding-right:30px;color: #B2B2B2;color: red">
                {{item.csflag ? '初审意见：' + item.csyj + ' ' :' ' }} {{item.fsflag ? '复审意见：' + item.fsyj + ' ' :' ' }}{{item.jhflag ? '终审意见：' + item.shyj :'' }}
              </div>

            </div>
            <div class="columnr rightr" >
              <div style="font-size: 20px;color: red;">
                {{item.zje}}元
              </div>
              <div style="font-size: 20px;color: red;">
                <van-tag :type="item.jhflag == '1' ? 'success':'danger'" size="small">{{item.jhflag == '1' ? '已激活': item.jhflag == '2' || item.csflag == '2' || item.fsflag == '2'  ? '已驳回':'未激活'}}</van-tag>
              </div>
            </div>
          </div>

          <div style="font-size: 14px;padding-left: 30px;padding-top: 5px;color: dodgerblue" @click="handleCall(item.shphone)">
            {{item.shphone}}
          </div>

        </div>

        <div slot="right" style="background-color: #FF6900;width: 65px;height: 100%;text-align: center;vertical-align: middle;font-size: 20px;padding-top: 10px;" @click="doDelete(item)">删除</div>
      </van-swipe-cell>

      <van-divider></van-divider>
    </div>
    <div class="dibu">
      <div style="position: absolute;right: 20px;font-size: 20px;">合计: {{total}}元</div>
    </div>

  </div>

</template>

<script>

import { Dialog, Toast, Grid, GridItem, SwipeCell } from 'vant'

import { queryUserInfo, listAchievements, delAchievements } from '../../api/api'
import { floatAdd } from '../../utils/NumberUtil'

export default {
  name: 'MyAchievements',
  data() {
    return {
      deptname: '',
      userid: '',
      postList: [],
      deptid: '',
      name: '',
      list: [],
      loading: false,
      finished: false,
      date: '',
      show: false,
      startDate: '',
      endDate: '',
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      achList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      shname: ''
    }
  },

  created() {
    this.queryUserInfo()

    this.pageNum = 1

    this.achList = []

    var date = new Date()
    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
    var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)

    this.date = this.formatDate(firstDay) + '-' + this.formatDate(lastDay)
    this.startDate = this.formatDate(firstDay)
    this.endDate = this.formatDate(lastDay)

    const that = this
    /*
      window.onscroll = function(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop + windowHeight >= scrollHeight-40){
          //写后台加载数据的函数
          that.pageNum = that.pageNum + 1
          console.log('页码',that.pageNum)
          that.listAchievements()
        }
      }*/
  },
  mounted() { },

  methods: {

    handleCall(phone) {
      window.location.href = 'tel://' + phone
    },
    // 查询当前用户所在部门
    queryUserInfo() {
      const param = {}
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
          this.name = response.data.name
          this.userid = response.data.userid
          this.listAchievements()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },

    onConfirm(date) {
      const [start, end] = date
      this.show = false
      this.startDate = this.formatDate(start)
      this.endDate = this.formatDate(end)
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.achList = []
      this.total = 0
      this.listAchievements()
    },

    handleInputShname(value) {
      this.shname = value
      this.listAchievements()
    },

    listAchievements() {
      const param = {}
      const userid = this.userid
      param.userId = userid
      param.startDate = this.startDate
      param.endDate = this.endDate
      param.appflag = '1'
      param.shname = this.shname
      // param.pageNum = this.pageNum
      // param.pageSize = this.pageSize
      const that = this
      listAchievements(param).then(response => {
        if (response.code === 200) {
          const achList = response.rows
          if (achList) {
            for (var i = 0; i < achList.length; i++) {
              achList[i].index = i + 1
              // achList[i].index = ((param.pageNum || 1) - 1) * (param.pageSize||10) + i + 1
              that.total = floatAdd(that.total, parseFloat(achList[i].zje))
            }
          }
          that.achList = that.pageNum == 1 ? achList : that.achList.concat(achList)
          console.log('业绩列表')
          console.log(response)
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    doModify(item) {
      console.log(item)
      this.$router.push({ path: '/addyj', query: { item: item }})
    },

    doDelete(item) {
      console.log(item)
      if (item.jhflag == '1' || item.auditflag == '1' || item.csflag == '1' || item.fsflag == '1' || item.hdflag == '1') {
        Toast.fail('已审核，不能删除')
        return
      }
      delAchievements(item.achid).then(response => {
        if (response.code == 200) {
          Toast.success('删除成功')
          this.listAchievements()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: auto;
    background-color: white;
  }

  .top{
    padding-left: 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: row;
  }

  .jt{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
  }

  .rightr{
    position: absolute;
    right: 30px;
    padding-top: 10px;
  }

  .dibu{
    left: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #F0F4FE;
    box-shadow: 10px 10px 5px #888888;
    color: black;
  }

</style>
